﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 start -->
      <el-row style = 'margin-bottom: 20px'>
        <el-col :span = '16'>
          <el-input placeholder = "请输入应用名称" v-model = 'searchKey' clearable></el-input>
        </el-col>
        <el-col :span = '6' style = 'margin-left: 10px'>
          <el-button type = 'primary' @click = 'getSearchData'>查询</el-button>
        </el-col>
      </el-row>
      <!-- 检索部分 end -->
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border >
          <el-table-column  prop = "Title" label = "应用名称" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "Code" label = "应用编码" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "Token" label = "令牌" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "Status" label = "状态" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "DBConnStr" label = "连接字符串" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "DBType" label = "数据库类型" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column  prop = "Remark" label = "备注" align = "center" show-overflow-tooltip></el-table-column>
          <el-table-column label = "操作" align = "center" width = '230'>
            <template slot-scope= "scope">
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>添加应用</el-button>
        </div>
        <div class = 'page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加账号的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog" :model = "ruleForm" ref = "ruleForm">
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules'>
        <el-form-item label = "应用名称：" prop = 'Title'>
          <el-input v-model = 'ruleForm.Title' placeholder = "请输入应用名称"></el-input>
        </el-form-item>
        <el-form-item label = "编码：" prop = 'Code'>
          <el-input v-model = 'ruleForm.Code' placeholder = "请输入应用编码" :disabled = "isDisabled"></el-input>
        </el-form-item>
        <el-form-item label = "令牌：" prop = 'Token'>
          <el-input v-model = 'ruleForm.Token' placeholder = "请输入访问令牌"></el-input>
        </el-form-item>
        <el-form-item label = "状态：" prop = 'Status'>
          <el-select v-model = "ruleForm.Status" placeholder = "请选择应用状态">
            <el-option value = "0" label = "停用"></el-option>
            <el-option value = "1" label = "启用"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label = "连接字符串：" prop = 'DBConnStr'>
          <el-input v-model = 'ruleForm.DBConnStr' placeholder = "请输入链接字符串" type = "textarea" autosize></el-input>
        </el-form-item>
         <el-form-item label = "数据库类型：" prop = 'DBType'>
          <el-select v-model = "ruleForm.DBType" placeholder = "请选择应用状态">
            <el-option value = "sqlserver" label = "sqlserver"></el-option>
            <el-option value = "mysql" label = "mysql"></el-option>
            <el-option value = "oracle" label = "oracle"></el-option>
            <el-option value = "sqlite" label = "sqlite"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = "备注：">
          <el-input v-model = 'ruleForm.Remark' placeholder = "请输入备注" type = "textarea" autosize></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script src='./applicationManagement.js'></script>
